<template>
  <div>
    <div class="btnbox">
      <span class="playbtn">
        <i><em />播放</i>
      </span>
      <span class="addmusicbtn"></span>
      <span class="collectionbtn"><i>收藏热门</i></span>
    </div>
    <table>
      <tr v-for="(item, index) in musicList" :key="item.id">
        <td class="tdOne">
          {{ index }} <span @click="PlayClick(item)"></span>
        </td>
        <router-link
          tag="td"
          :to="{ name: 'musicdetail', query: { id: item.id } }"
          class="tdTwo"
          >{{ item.name }} <span></span
        ></router-link>
        <td class="tdThere">
          <p class="musicTime">{{ (item.dt / 1000 / 60).toFixed(2) }}</p>
          <div class="operationBox">
            <span class="play" @click="pushMusicAction(item)"></span>
            <span class="Collection" @click="collectionBtn(item.id)"></span>
            <span class="forward"></span>
            <span class="download"></span>
          </div>
        </td>
        <td class="tdFour">{{ item.al.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { singerMusic } from "@/api";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      musicList: [],
    };
  },
  created() {
    this.getSingerMusic();
  },
  methods: {
    ...mapActions("musicStore", ["unshiftMusic", "pushMusicAction"]),
    ...mapActions("songSheetStore", [
      "set_change_songSheetBoxIsHide",
      "set_change_musicId",
    ]),
    getSingerMusic() {
      singerMusic({ id: this.$route.query.id }).then((res) => {
        this.musicList = res.hotSongs;
      });
    },
    async PlayClick(item) {
      //直接点击播放当前音乐
      await this.unshiftMusic({ data: item, that: this });
      // this.$bus.$emit("playCurrentMusic");
    },
    //收藏按钮
    collectionBtn(id) {
      this.set_change_musicId(id);
      this.set_change_songSheetBoxIsHide(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.btnbox {
  margin: 20px 0;
  .playbtn {
    color: #fff;
    background-position: right -428px;
    vertical-align: middle;
    display: inline-block;
    background: url("./../../assets/imges/backgroundStripe.png") no-repeat right -428px;
    i {
      padding: 0 7px 0 8px;
      display: inline-block;
      height: 31px;
      line-height: 31px;
      overflow: hidden;
      vertical-align: top;
      text-align: center;
      background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -387px;
      cursor: pointer;
      em {
        width: 20px;
        height: 18px;
        margin: 6px 2px 2px 0;
        float: left;
        overflow: hidden;
        background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -1622px;
      }
    }
  }
  .addmusicbtn {
    width: 31px;
    height: 31px;
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
    background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -1588px;
  }
  .collectionbtn {
    display: inline-block;
    padding: 0 5px 0 0;
    margin-left: 10px;
    vertical-align: middle;
    white-space: nowrap;
    height: 31px;
    line-height: 30px;
    background: url("./../../assets/imges/backgroundStripe.png") no-repeat right -1020px;
    min-width: 23px;
    cursor: pointer;
    i {
      height: 31px;
      display: inline-block;
      line-height: 30px;
      padding-right: 2px;
      padding-left: 28px;
      background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -977px;
      min-width: 23px;
      cursor: pointer;
    }
  }
}
table {
  width: 100%;
  border-collapse: collapse;
  tr {
    width: 100%;
    .tdOne {
      width: 74px;
      padding: 6px 10px;
      line-height: 18px;
      text-align: left;
      color: #999;
      span {
        float: right;
        width: 17px;
        height: 17px;
        cursor: pointer;
        background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -103px;
      }
    }
    .tdTwo {
      padding: 6px 10px;
    }
    .tdThere {
      color: #666;
      width: 100px;
      &:hover {
        .operationBox {
          display: block;
        }
        .musicTime {
          display: none;
        }
      }
      .operationBox {
        display: none;
        span {
          display: inline-block;
          width: 18px;
          height: 16px;
          vertical-align: middle;
          margin-left: 5px;
        }
        .play {
          width: 13px;
          height: 13px;
          background: url("./../../assets/imges/btnIconTwo.png") no-repeat 0 -700px;
        }
        .Collection {
          background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -174px;
        }
        .forward {
          background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -195px;
        }
        .download {
          background: url("./../../assets/imges/iconTwo.png") no-repeat -81px -174px;
        }
      }
    }
    .tdFour {
      width: 20%;
      padding: 6px 10px;
      line-height: 18px;
      text-align: left;
      color: #333;
    }
    &:nth-of-type(even) {
      background: #f7f7f7;
    }
  }
}
</style>